<template>
  <div class="info">
    <div class="title">
      {{ taskInfo.chapterName }}
    </div>
    <div class="line1">任务描述</div>
    <div class="line2" style="white-space: pre-wrap" v-html="taskInfo.describe"></div>
    <div class="line1">任务目标</div>
    <div class="line2">{{ taskInfo.chapterObjectives }}</div>
    <div v-if="taskInfo.recommendTime" class="line1">建议学时(课时): {{ taskInfo.recommendTime }}h</div>
  </div>
</template>

<script>
export default {
  components: {},
  props: { taskInfo: Object },
  data() {
    return {}
  },
  watch: {},
  methods: {},
  created() {
  },
  mounted() {
  }
}
</script>
<style scoped lang="scss">
.info {
  padding: 25px 40px;
  height: calc(100vh - 210px);
  overflow: auto;

  .title {
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #333333;
    line-height: 25px;
  }

  .line1 {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
    margin-top: 32px;
  }

  .line2 {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #999999;
    line-height: 22px;
    margin-top: 16px;
  }

  .line3 {
    margin-top: 4px;
    padding: 0 19px 0 24px;
    box-sizing: border-box;
    width: 920px;
    height: 48px;
    background: #f5f6f7;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 48px;

    img {
      margin-top: 13px;
      width: 20px;
      height: 20px;
    }
  }
}
</style>
